<script>
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import QueryBar from '../components/queryBar.svelte';
  import Paging from '../components/paging.svelte';
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {ActiveFreezeUser, AgentListDashboard, AgentList,ModifyVfunds} from '../api.js';
  import Query from '../model/query.js';
  import moment from 'moment';

  let btnText = '添加三级代理'
  let btnHref = "/agent/add/three"

  let data = {
    title: ["UID", "姓名", "手机号", "二级代理人","邀请码", "身份证", "邀请人数",  "加入时间",  "模拟资金管理", "状态"],
    data: []
  }

  let total = 0;
  let agents = 0;
  let users = 0;
  let adminOrUser=false
  // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.
  let query = new Query();
  onMount(() => {
    if (localStorage.getItem("uid") == -1) {
      adminOrUser = true
    } else {
      adminOrUser = false
    }
    // getInfo();
    getList();
  });
  window.modifyVFunds = async function(uid) {
    let val = event.target.value;
    await Post(ModifyVfunds,{
      uid: Number(uid),
      amount: val,
    })
    // console.log(uid,123)
  }
  async function getList(e) {

    if (!!e) {
      query.start = e.detail.start
      query.end = e.detail.end
      query.type = 3
    }
    if (query.start==''){
      query.end=''
		}
    query.type = 3
    let ret = await Post(AgentList, query)
    console.log(ret)
    query.total = ret.total;
    total = ret.total;
    let _data = [];
    if (!ret.list) ret.list = [];
	const user_type=localStorage.getItem("user_type");
    for (let item of ret.list) {
      let arr = [item.id, item.userinfo.name, item.phone, item.inviteCode,item.myInviteCode,
				item.userinfo.id, item.agentinfo.userCount, moment(item.createDate).format("YYYY-MM-DD hh:mm:ss"),
			user_type=='0'?`<textarea class="textarea" style="resize:none;height: 30px;font-size: 12px" onblur="modifyVFunds(${item.id})" rows=1 cols=4>${item.vfunds}</textarea>`:item.vfunds,
        //`<textarea class="textarea" style="resize:none;height: 30px;font-size: 12px" onblur="modifyVFunds(${item.id})" rows=1 cols=4>${item.vfunds}</textarea>`,
				`<select on:click><option value=0>正常</option><option ${item.state == 1 && 'selected'} value=1>冻结</option></select>`];
      arr.id = item.id;
      arr.href = "/agent/users?agent_id=" + item.id
      arr.handler = changeState;
      _data.push(arr);
    }
    data.data = _data;
  }

  async function changeState() {
    event.stopPropagation()
    let _select = this.querySelector("select");
    let id = this.getAttribute("data-id");

    await Post(ActiveFreezeUser, {id: Number(id)});
    getList();
  }

  async function getInfo() {
    let ret = await Post(AgentListDashboard);
    if (!ret) return

    for (let item of ret) {
      if (item.key === "total") total = item.num;
      if (item.key === "agents") agents = item.num;
      if (item.key === "users") users = item.num;
    }
  }

  function setPage(page) {
    query.page = page;
    getList();
  }

</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px" class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            三级代理管理
        </span>
		</div>
		<div class="borderRadius4 container backBlue colorWhite ">
				<div class="columns" style="padding: 20px;">
						<div class="column is-2">
								<nav class="level">
										<div class="level-item has-text-centered">
												<div>
														<p class="heading">三级代理人数</p>
														<p class="font25 colorWhite">{total}</p>
												</div>
										</div>
								</nav>
						</div>
						<div class="column is-8">
						</div>
						<div class="column is-2 btn">
								<Btn text={btnText} href={btnHref}/>
						</div>
				</div>
		</div>
		<div class="container">
				<QueryBar query={query} on:message={getList}/>
		</div>
		<div class="container" style="margin-top:-10px">
				<List data={data}/>
		</div>
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.borderRadius4 {
				border-radius: 4px;
		}

		.container {
				margin: 20px 5px;
		}

		.info {
				background: #fff;
		}

		.btn {
				line-height: 5px;
				top: 50%;
				transform: translateY(10%);
		}
</style>
